<template>
  <u-navbar title="兼职赚钱" placeholder leftIconSize="0px" bg-color="unset" titleStyle="color:#fff"></u-navbar>
  <image src="@/static/images/02_qw.png" class="banner-img"></image>
  <view class="home">
    <view class="job-box">
      <view class="u-flex-y-center u-flex-between job-item" @click="$u.route('/pages/partTimeJob/recommendBuy')">
        <u-image src="@/static/images/02_qwxc.png" :fade="false" width="76rpx" height="76rpx"></u-image>
        <view class="u-flex-1 u-flex-y-center u-flex-between u-m-l-20">
          <u-text text="推荐买房赚钱" color="#000" size="15" bold></u-text>
          <view class="job-btn">立即推荐</view>
        </view>
      </view>
      <view class="u-flex-y-center u-flex-between job-item" @click="$u.route('/pages/partTimeJob/recommendHouse')">
        <u-image src="@/static/images/02_er.png" :fade="false" width="76rpx" height="76rpx"></u-image>
        <view class="u-flex-1 u-flex-y-center u-flex-between u-m-l-20">
          <u-text text="推荐卖房赚钱" color="#000" size="15" bold></u-text>
          <view class="job-btn">立即推荐</view>
        </view>
      </view>
      <view class="u-flex-y-center u-flex-between job-item" @click="$u.route('/pages/houseMine/minePoster')">
        <u-image src="@/static/images/02_rt.png" :fade="false" width="76rpx" height="76rpx"></u-image>
        <view class="u-flex-1 u-flex-y-center u-flex-between u-m-l-20">
          <u-text text="推荐经纪人赚钱" color="#000" size="15" bold></u-text>
          <view class="job-btn">立即推荐</view>
        </view>
      </view>
    </view>
    <view class="task-job">
      <image src="@/static/images/02_nh.png" mode=""></image>
      <view class="task-item u-flex-y-center u-flex-between" @click="$u.route('/pages/index/houseList/houseList')">
        <u-text color="#333" text="转发有礼-分享房源领红包" size="16"></u-text>
        <view class="task-btn">去转发</view>
      </view>
      <view class="task-item u-flex-y-center u-flex-between" @click="$u.route('/pages/index/certificateHouse')">
        <u-text color="#333" text="优惠券转发" size="16"></u-text>
        <view class="task-btn">去转发</view>
      </view>
      <view class="task-item u-flex-y-center u-flex-between">
        <u-text color="#333" text="每日打卡" size="16"></u-text>
        <view class="task-btn" @click="handleSign">去打卡</view>
      </view>
      <view class="task-item u-flex-y-center u-flex-between" @click="$u.route('/pages/index/houseLive/houseLive')">
        <u-text color="#333" text="直播分享任务奖励" size="16"></u-text>
        <view class="task-btn">去分享</view>
      </view>
    </view>
  </view>
  <signItem :show="data.show" @update:show="data.show = $event"></signItem>

</template>

<script setup>
  import signItem from '@/components/sign-item/sign-item.vue'
  import { ref } from 'vue';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  const data = ref({
    show: false,

  })
  onShareAppMessage(() => {})
  onShareTimeline(() => {})
  const handleSign = () => {
    data.value.show = true
  }
</script>

<style scoped lang="scss">
  .banner-img {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    height: 558rpx;
  }

  .home {
    position: relative;
    z-index: 2;
    padding: 0 20rpx 30rpx;
    padding-top: 350rpx;

    .job-box {
      height: 428rpx;
      background: linear-gradient(130deg, #FFF8F2 0%, #FFFCF0 58%, #FFFFFF 100%);
      border-radius: 28rpx;
      padding: 0 30rpx;

      .job-item {
        padding: 32rpx 0;

        .job-btn {
          width: 152rpx;
          height: 54rpx;
          background: #F87610;
          border-radius: 30rpx;
          text-align: center;
          line-height: 54rpx;
          color: #fff;
          font-size: 24rpx;
        }
      }

      .job-item+.job-item {
        border-top: 1rpx solid rgba(0, 0, 0, 0.08);
      }
    }
  }

  .task-job {
    height: 566rpx;
    border-radius: 68rpx;
    position: relative;
    z-index: 1;
    margin-top: 28rpx;
    padding: 90rpx 36rpx 40rpx;

    image {
      width: 710rpx;
      height: 589rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .task-item {
      padding: 16rpx 24rpx;
      background: #fff;
      box-shadow: 0rpx 6rpx 12rpx 2rpx #F3EFEA;
      border-radius: 16rpx;
      margin-top: 24rpx;
    }

    .task-btn {
      width: 114rpx;
      height: 58rpx;
      background: #F87610;
      border-radius: 20rpx;
      text-align: center;
      line-height: 58rpx;
      font-size: 26rpx;
      color: #fff;
    }
  }
</style>